<template>
	<div ref="dom" class="charts chart-pie"></div>
</template>

<script>
import * as echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
// echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartPie',
  props: {
    value: Array,
    text: String,
    subtext: String,
    title:Object,
    series:Array,
    legend: Object,
    tooltip:Object,
  },
  data () {
    return {
      dom: null
    }
  },
  watch: {
    value: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    intChart () {
      this.$nextTick(() => {
        let legend = this.value.map(_ => _.name)
        let option = {
          title: Object.assign({
            text: this.text,
            subtext: this.subtext,
            x: 'center',
            y: '45%',
            textStyle: {
              color: '#fff',
              fontSize: 12
            },
            subtextStyle: {
              color: '#fff',
              fontSize: 12
            }
          },this.title),
          tooltip: Object.assign({
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },this.tooltip),
          // legend: {
          // 	orient: 'vertical',
          // 	left: 'left',
          // 	data: legend
          // },
          series: [
            {
              name: this.text,
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '53%'],
              roseType: true,
              color: ['#B15EDB', '#519CF9', '#F187A7', '#7B69EE', '#99782E', '#1D8075', '#183ED4', '#5179F9'].reverse(),
              data: this.value.map(function(item,index){
                if (item.name=='中国') {
                  return {
                    name:item.name,
                    value:item.value,
                    itemStyle:{
                      color:'#DC3D6C',
                      // borderColor:'#EDCD8B',
                      // borderWidth:3
                    }
                  }
                }
                return item
              }),
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                length: 15,
                length2: 15
              },
              label: {
                fontSize: 12,
                fontWeight: 'bold'
                // formatter: '{b}\n{d}%',
              }
            }
          ]
        }

        if (this.legend) {
          option['legend'] = this.legend
        }

        if (this.series) {
          var item = this.series
          for (let i in item) {
            if (option.series[i]) {
              Object.assign(option.series[i], item[i])
            } else {
              option.series.push(item[i])
            }
          }
        }

        this.dom = echarts.init(this.$refs.dom, 'tdTheme')
        this.dom.setOption(option,true)
        on(window, 'resize', this.resize)
      })
    }
  },
  mounted () {
    this.intChart()
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
